<template>
  <div>
    <header>
      <div class="container">
        <div class="left">
          <div class="left_img">
            <img src="../assets/img/235X60.png" alt />
          </div>
        </div>
        <div class="center">
          <div class="center_img">
            <img src="../assets/img/328x37.png" alt />
          </div>
        </div>
        <div class="right">
          <div class="right_left_img">
            <img src="../assets/img/53x53.png" alt />
          </div>
          <div class="right_right_img">
            <div class="right_right_img_top">
              <img src="../assets/img/114x16_2.png" alt />
            </div>
            <div class="right_right_img_bottom">
              <img src="../assets/img/114x16.png" alt />
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- 轮播图 -->
    <main class="rotation">
      <el-carousel :interval="5000" arrow="always" height="6.5rem">
        <!-- <el-carousel :interval="5000" arrow="hover" height="6.5rem"> -->
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <img :src="item.idView" alt />
          <!-- <h1>{{item}}</h1> -->
        </el-carousel-item>
      </el-carousel>
    </main>
    <!-- 导航 -->
    <nav class="head_nav">
      <div class="head_nav_part">
        <ul class="head_nav_ul">
          <li>
            <a href>首页</a>
          </li>
          <li>
            <a href>研究领域</a>
          </li>
          <li>
            <a href>培训项目</a>
          </li>
          <li>
            <a href>社会责任</a>
          </li>
          <li>
            <a href>合作机构</a>
          </li>
          <li>
            <a href>财税研究院机构</a>
          </li>
          <li>
            <a href>财税政策</a>
          </li>
          <li>
            <a href>走进智慧</a>
          </li>
          <li>
            <a href>人才观念</a>
          </li>
        </ul>
      </div>
    </nav>
    <!-- about关于我们 -->
    <div class="aboutUs">
      <div class="aboutUs_p">
        <p>关于我们</p>
        <span></span>
      </div>
      <p class="xiLine"></p>
      <p class="aboutUs_p_eng">ABOUT US</p>
      <!-- 详情介绍 -->
      <div class="aboutUs_text">
        <p>智慧财税研究院(广东)股份有限公司，坐落于中国重要的中心城市、世界一线城市广州。是一家基干新思想，新概念成立的年财税专才专业建设、教学方案研发、教学大岗研发、专才教育教学、会计实操课程研发，财务机器人应用实验课程研发、现代学徒制、定制会计班，全能会计班、会计短期提升班、知识产权，众创空间及孵化器运营、财税人才就业创业培训、人才输送、会计人才职业自由化为一体的企业，是全国首批、广东首家将“人工智能在财务领域的应用”、“人工智能时代财务管理”引入高校的企业。公司致力于解决“企业招工不理想、招工难”和“学生就业不理想、就业难两大社会难题。智慧所研发的课程以实操视频演讲为基础，动手操作为核心，以工商、财税经验为目标，以人工智能为突破，以企业需求为导向，突出“熟练度”让学员一毕业就成为“即毕业即上岗”型现代实用人才。为培养新一代财税全能型人才为目标，真正达到改善高职院校会计人才的培养结构及培养质量，全面提升高职院校技能敦育，融入科技、做出特色。力求做到利院校、利学生，利企业、利社会、利国家。多赢局面 愿景：成为令人尊敬的会计职业教育综合服务平台 使命：解决“招工难”、“就业难”两大社会难题 口号：“即毕业即上岗” 企业价值观：利学生，利院校、利企业，利社会、利国家 人文价值观：求真、担当、专注、创新.共赢</p>
      </div>
      <!--办公照片 -->
      <div class="officePic">
        <div class="offic_left">
          <img src="../assets/img/left.png" alt />
        </div>

        <div class="offic_right">
          <img src="../assets/img/right.png" alt />
        </div>
        <!-- 中间的图 -->
        <div class="office_center">
          <img src="../assets/img/center.png" alt />
        </div>
      </div>
    </div>
    <!--  特色培养-->
    <div class="traitDevelop">
      <!--标题 -->
      <div class="dev_title">
        <p>特色培养</p>
        <span></span>
      </div>
      <p class="dev_Line"></p>
      <p class="dev_eng">SERVICE TYPE</p>
      <!-- 图片nav -->
      <nav class="dev_img_nav">
        <div>
          <img src="../assets/img/nav1.png" alt />
        </div>
        <div>
          <img src="../assets/img/nav2.png" alt />
        </div>
        <div>
          <img src="../assets/img/nav3.png" alt />
        </div>
        <div>
          <img src="../assets/img/nav4.png" alt />
        </div>
        <div>
          <img src="../assets/img/nav5.png" alt />
        </div>
        <div>
          <img src="../assets/img/nav6.png" alt />
        </div>
      </nav>
      <!-- 图片对应的文字 -->
      <div class="dev_under_p">
        <p>合作办学</p>
        <p>人才培养</p>
        <p>师资培养</p>
        <p>创新创业</p>
        <p>校企合作</p>
        <p>生涯跟踪</p>
      </div>
      <!--展示作品-->
      <ul class="showWorks">
        <li>
          <img src alt />
        </li>
        <li>
          <img src alt />
        </li>
        <li>
          <img src alt />
        </li>
        <li>
          <img src alt />
        </li>
        <li>
          <img src alt />
        </li>
        <li>
          <img src alt />
        </li>
      </ul>
    </div>
    <!-- 三重一轻一求 -->
    <div class="comAdvantage">
      <!--标题 -->
      <div class="adv_title">
        <p>三重一轻一求</p>
        <span></span>
      </div>
      <p class="adv_Line"></p>
      <p class="adv_eng">REAL TIME INFORMATION</p>
      <div class="threeImportant">
        <img src="../assets/img/three.png" alt />
        <div class="threeText_one">
          <p>重学生质量培养</p>
          <p>重院校专业布局、结构</p>
          <p>重企业用人需求、人才缺口</p>
        </div>
        <div class="threeText_tow">
          <p>轻盈利</p>
        </div>
        <div class="threeText_three">
          <p>力求做到利学生、</p>
          <p>利院校、利企业、</p>
          <p>利社会、利国家的</p>
          <p>多赢局面</p>
        </div>
      </div>
      <div class="adv_between_title">
        <p>智慧财税研究院核心优势</p>
      </div>
      <div class="three_box_wrap">
        <div class="three_box">
          <div class="inner_box1">
            <p>为贯彻落实《新一代人工智能发展规划》(国发 [2017] 35号)《促进新一代人 工智能产业发展三年行动计划(2018-2020年)》(工 信部科[2017) 315号) 等文件精神进一步加快发展新一代人工智能产业。鼓励高校开设人工智能相关课程，引导企业、职业院校(含技工院校)、培训机构联合建设人工智能人才培训基地。</p>
          </div>
        </div>
        <div class="three_box">
          <div class="inner_box2">
            <p>智慧财税研究院是国内首批省内首家将“人工智能在财务领域的应用”“ 人工智能时代财务管理”引入高校的企业。智慧财税研究院核心优势-人工智能在财务领域的应用”“人工智能时代财务管理”</p>
          </div>
        </div>
        <div class="three_box">
          <div class="inner_box3">
            <p>未来已来，人工智能正在以前所未有的速度进入了我们所有财务人的视野。财务及会计领域正在经历一场智能化时代下的大变革人工智能正在改变着今天的世界，我们必须意识到，智能时代也正在改变财务。大数据、人工智能在财务领域的应用目前极少随着企业对现代化财税人才的需求持续升温，现代化财税人才培养变得越来越关键。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>>

<script>
export default {
  data() {
    return {
      hello: "800+'rem'",
      //  加require
      imgList: [
        { id: 0, idView: require("@/assets/img/1920x650.png") },
        { id: 1, idView: require("@/assets/img/1920.jpg") },
        { id: 2, idView: require("@/assets/img/datu.jpg") }
      ]
    };
  }
};
</script>

<style scoped>
header {
  width: 100%;
  height: 0.76rem;
  background-color: #fff;
}
.container {
  display: flex;
  width: 82.81%;
  height: 100%;
  /* background-color: aqua; */
  margin: 0 auto;
}
.left_img {
  width: 2.35rem;
  height: 0.6rem;
}
.left_img img {
  width: 100%;
  height: 100%;
}

.left,
.right {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  height: 100%;
  width: 20%;
  /* background-color: green; */
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  /* background-color: orange; */
}
.center_img {
  width: 3.28rem;
  height: 0.37rem;
}
.center_img img {
  width: 100%;
  height: 100%;
}
.right {
  /* flex-flow: row-reverse;会反方向 */
  justify-content: flex-end;
}
.right_left_img {
  width: 0.53rem;
  height: 0.53rem;
}
.right_left_img img {
  width: 100%;
  height: 100%;
}

.right_right_img {
  width: 1.14rem;
  height: 0.46rem;
  margin-left: 0.11rem;
}
.right_right_img img {
  width: 100%;
  height: 100%;
}
.right_right_img_top {
  width: 1.14rem;
  height: 0.16rem;
  margin-bottom: 0.1rem;
}
.right_right_img_top img {
  width: 100%;
  height: 100%;
}
.right_right_img_bottom {
  width: 1.14rem;
  height: 0.16rem;
}
.right_right_img_bottom img {
  width: 100%;
  height: 100%;
}

/* 轮播 */
.rotation {
  height: 6.5rem;
  width: 100%;
  background-color: pink;
}
/* 导航 */
.head_nav {
  height: 1.01rem;
  width: 100%;
  background-color: #242422;
}
.head_nav_part {
  width: 77%;
  height: 100%;
  margin: 0 auto;
  /* background-color: #ccc; */
}
.head_nav_ul {
  display: flex;
  /* background-color: green; */
  height: 100%;
  width: 100%;
}
.head_nav_ul li {
  height: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.head_nav_ul li a {
  font-size: 0.19rem;
  color: rgba(255, 255, 255, 1);
}

.head_nav_ul li:hover {
  background-color: #e97715;
}

/* 设置轮播图 根据页面大小等比例缩放 */
.el-carousel {
  width: 100%;
}
.el-carousel img {
  width: 100%;
  height: 100%;
}
/* 轮播左右点击的两个按钮 */

/deep/ .el-carousel__arrow {
  width: 0.5rem;
  height: 0.5rem;
  font-size: 0.3rem;
}
/deep/ .el-carousel__button {
  width: 0.42rem;
  height: 0.065rem;
}
/* 关于我们 */
.aboutUs {
  width: 100%;
  height: 10.43rem;
  background-color: #fff2e6;
}
.aboutUs_p p {
  width: 100%;
  line-height: 0.39rem;
  text-align: center;
  padding-top: 1.83rem;
  font-size: 0.4167rem;
  /* background-color: pink; */
}
/* */
.aboutUs_p {
  position: relative;
}
.aboutUs_p span {
  position: absolute;
  display: inline-block;
  bottom: -0.2rem;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  left: 50%;
  width: 1.68rem;
  height: 0.08rem;
  background-color: #e97619;
}
.xiLine {
  margin-top: 0.14rem;
  width: 100%;
  height: 0.03rem;
  background-color: #c3a179;
}
.aboutUs_p_eng {
  margin-top: 0.12rem;
  text-align: center;
  font-size: 0.1821rem;
  line-height: 0.14rem;
  font-weight: 500;
  color: #8b8b8b;
}
.aboutUs_text {
  /* padding-top: 0.43rem; */
  width: 66%;
  height: 2.21rem;
  /* background-color: #ccc; */
  margin: 0 auto;
  margin-top: 0.4rem;
  font-size: 0.17rem;
  /* line-height: ; */
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
}
.aboutUs_text p {
  line-height: 0.28rem;
}
/* 办公照片 */
.officePic {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 73%;
  height: 2.95rem;
  /* background-color: skyblue; */
  margin: 0 auto;
  margin-top: 1.16rem;
}

.offic_left,
.offic_right {
  width: 5.13rem;
  height: 2.95rem;
}
.officePic img {
  width: 100%;
  height: 100%;
}
.office_center {
  width: 5.85rem;
  height: 3.35rem;
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  left: 50%;
}
.office_center img {
  width: 100%;
  height: 100%;
}
/* 特色培养 */
.traitDevelop {
  width: 100%;
  height: 10.45rem;
  background-color: #fff;
}
.dev_title {
  position: relative;
}

/* 重复的代码 */
.dev_title p,
.adv_title p {
  width: 100%;
  line-height: 0.39rem;
  text-align: center;
  padding-top: 1.37rem;
  font-size: 0.4167rem;
}
.dev_title span {
  position: absolute;
  display: inline-block;
  bottom: -0.2rem;
  transform: translateX(
    -50%
  ); /*向左向上分别平移自身的一半  第一个值 X  第二个 Y*/
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  left: 50%;
  width: 1.68rem;
  height: 0.08rem;
  background-color: #e97619;
}
.dev_Line,
.adv_Line {
  margin-top: 0.14rem;
  width: 100%;
  height: 0.03rem;
  background-color: #c3a179;
}
.dev_eng,
.adv_eng {
  margin-top: 0.12rem;
  text-align: center;
  font-size: 0.1821rem;
  line-height: 0.14rem;
  font-weight: 500;
  color: #8b8b8b;
}
/* 图片导航 */
.dev_img_nav {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 0.72rem;
  width: 60.06%;
  height: 1.53rem;
  /* background-color: #8cc265; */
}
.dev_img_nav div {
  width: 1.35rem;
  height: 1.5rem;
  /* background-color: #ccc; */
}
.dev_img_nav img {
  width: 100%;
  height: 100%;
}
/* 图片下面的文字 */
.dev_under_p {
  display: flex;
  justify-content: space-between;
  width: 60.06%;
  height: 0.25rem;
  /* background-color: pink; */
  margin: 0 auto;
  margin-top: 0.17rem;
}
.dev_under_p p {
  /* width: 0.98rem; */
  width: 1.35rem;
  text-align: center;
  font-size: 0.25rem;
  /* 行高等于height */
  line-height: 0.25rem;
  /* font-weight:400; */
  color: rgba(51, 51, 51, 1);
}
/* 作品展示的li */
.showWorks {
  display: flex;
  justify-content: space-between;
  width: 61.14%;
  height: 3.57rem;
  margin: 0 auto;
  margin-top: 0.25rem;
  /* background-color: #ccc; */
}
.showWorks li {
  width: 1.51rem;
  height: 100%;
  background-color: #ea7e23;
}
/* 三重一轻一求 */
.comAdvantage {
  width: 100%;
  height: 13.97rem;
  background-color: #fef2e6;
}
.adv_title {
  position: relative;
}
.adv_title p {
  /* 其他是一样的 */
  padding-top: 1.48rem;
}
.adv_title span {
  position: absolute;
  display: inline-block;
  bottom: -0.2rem;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  left: 50%;
  width: 1.68rem;
  height: 0.08rem;
  background-color: #e97619;
}
.threeImportant {
  position: relative;
  width: 49%;
  height: 2.21rem;
  margin: 0 auto;
  margin-top: 1.1rem;
  /* background-color: #ccc; */
}
.threeImportant img {
  width: 100%;
  height: 100%;
}
.threeText_one {
  position: absolute;
  left: 0.9rem;
  /* top: 0.82rem; */
  top: 0.78rem;
  /* width: 1.77rem; */
  /* height: 0.55rem; */
  width: 1.77rem;
  height: 0.6rem;
  /* background-color:#fff; */
  z-index: 1000;
  line-height: 0.24rem;
  font-size: 0.13rem;
  letter-spacing: 0.017rem;
  font-weight: 600;
  color: rgba(231, 120, 23, 1);
}
.threeText_tow {
  position: absolute;
  left: 4.62rem;
  top: 1rem;
  /* background-color: pink; */
  font-size: 0.1882rem;
  font-weight: 600;
  color: rgba(231, 120, 23, 1);
  letter-spacing: 0.04rem;
}
/* .threeText_three p{
   
} */

.threeText_three {
  position: absolute;
  left: 7.81rem;
  /* top: 0.72rem; */
  top: 0.68rem;
  /* width: 1.17rem; */
  width: 1.5rem;
  height: 0.77rem;
  /* background-color: #ffffff; */
  z-index: 1000;

  line-height: 0.24rem;
  font-size: 0.13rem;
  letter-spacing: 0.016rem;
  font-weight: 600;
  color: rgba(231, 120, 23, 1);
}
/* 标题 */
.adv_between_title {
  margin: 0 auto;
  margin-top: 1.63rem;
  width: 30%;
  text-align: center;
  height: 0.42rem;
  line-height: 0.39rem;
  /* background-color: #ccc; */
  font-size: 0.4167rem;
  color: rgba(231, 120, 23, 1);
  letter-spacing: 0.1rem;
}
.three_box_wrap {
  display: flex;
  justify-content: space-between;
  width: 56%;
  height: 4.15rem;
  background-color: #ccc;
  margin: 0 auto;
  margin-top: 0.38rem;
}
/*  */
.three_box {
  width: 3.18rem;
  height: 4.15rem;
  border: 2px solid rgba(231, 120, 23, 1);
}
.three_box .inner_box1 {
  width: 2.44rem;
  height: 3.38rem;
  background-color: pink;
  /* margin-top: 0.25rem; */
  margin-top: 0.23rem;
  margin-left: 0.38rem;
  font-size: 0.1667rem;
  /* line-height: 0.35rem; */
  line-height: 0.3rem;
  font-weight: 550;
  letter-spacing: 0.02rem;
  color: rgba(231, 120, 23, 1);
}
.three_box .inner_box2 {
  margin-top: 0.25rem;
  margin-left: 0.36rem;
  width: 2.44rem;
  height: 2.21rem;
  background-color: pink;
}
.three_box .inner_box3 {
  margin-top: 0.25rem;
  margin-left: 0.39rem;
  width: 2.37rem;
  height: 3.67rem;
  background-color: pink;
}
</style>